import React, { useRef, useState } from 'react'
import { Button, Form, message, Modal, Space, Table, TreeSelect } from 'antd'
import ProTable from '@ant-design/pro-table'
import { sections } from '@/services/exam'

const DepartmentModal = (props) => {

  let actionRef = useRef()
  const {departments,value,isShowExaminee,showExaminee,onSubmit} = props
  //部门人员列表数据
  let [sectionsData, setSectionsData] = useState([])
  //添加考试人员ID重复问题
  const [personIds, setPersonIds] = useState([])

  const [selectedRowKeys, setSelectedRowKeys] = useState([])

  const [selectedRows,setSelectedRows] = useState([])
  // 树状图组件
  const { TreeNode } = TreeSelect


  /**
   * 需要指定人
   */
  const onChange = (value, node, extra) => {
    if (node !== undefined) {
      sections(value).then(res => {
        setSectionsData(res.data)
      })
    }
  }


  //部门人员列表
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      hideInSearch: 'true'
    },
    {
      title: '用户昵称',
      dataIndex: 'name',
    },
    {
      title: '用户姓名',
      dataIndex: 'username',
    }
  ]

  return (
    <Modal
      width={1000}
      visible={isShowExaminee}
      onCancel={() => showExaminee(false)}
      footer={null}
    >
      <ProTable
        actionRef={actionRef}
        columns={columns}
        dataSource={sectionsData}
        rowKey="id"
        rowSelection={{
          selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
        }}
        form={{
          ignoreRules: false,
        }}
        pagination={{
          pageSize: 5,
        }}
        dateFormatter="string"
        options={false}
        tableAlertRender={({ selectedRowKeys, selectedRows, onCleanSelected }) => (
          <Space size={24}>
          <span>
            {
              setSelectedRowKeys(selectedRowKeys)
            }
            {
              setSelectedRows(selectedRows)
            }
            已选 {selectedRowKeys.length} 项
          </span>
          </Space>
        )}
        toolBarRender={() => [

          <Form.Item name="pid" style={ { marginRight:'100px',marginTop:'22px' } } label='选择部门'>
            <TreeSelect
              showSearch={true}
              style={{ width: '150%' }}
              value={value}
              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
              placeholder="选择部门"
              allowClear={true}
              treeDefaultExpandAll
              onChange={onChange}
            >
              {
                departments.data.map((item) => {
                  return (
                    <TreeNode key={item.id} value={item.id} title={item.name}>
                      {
                        item.children.map(data => {
                          return (
                            <TreeNode key={data.id} value={data.id} title={data.name}>
                              {
                                data.children ? data.children.map(datas => {
                                  return (
                                    <TreeNode key={datas.id} value={datas.id} title={datas.name}/>
                                  )
                                }) : ''
                              }
                            </TreeNode>
                          )
                        })
                      }
                    </TreeNode>
                  )
                })
              }
            </TreeSelect>
          </Form.Item>,
          <Button
            type="primary"
            onClick={()=>{
              showExaminee(false)
              let ids = [];
              let itemPerson = []
              selectedRows.map(item=>{
                if(personIds.indexOf(item.id) < 0){
                  ids.push(item.id)
                  itemPerson.push(item)
                }
              })
              onSubmit(ids,itemPerson)
            }}
          >
            确定({selectedRowKeys.length})
          </Button>
        ]}
      />
    </Modal>
  )
}

export default DepartmentModal